<template>
  <div :style="'width:' + width">
    <el-form :label-width="labelWidth" label-position="left">
      <el-form-item :label="name" :required="required">
        <div style="display: flex">
          <el-select :disabled="disabled" style="flex: 1" v-model="data.id" remote reserve-keyword
            placeholder="请输入关键词搜索" :remote-method="getSurveyListByUser" :loading="loading" @input="chooseSurvey">
            <el-option v-for="item in surveys" :key="item.DSSV_ID"
              :label="+ item.DSSV_ID + '  ' + '[' + item.DSSV_Village + ']' + item.DSSV_Name"
              :value="item.DSSV_ID"></el-option>
          </el-select>
          <el-button v-if="curSurvey" size="small" icon="el-icon-more" @click="detailVis = !detailVis"></el-button>
        </div>
      </el-form-item>
    </el-form>
    <div v-if="detailVis && curSurvey" style="margin: 20px">
      <div>姓名：{{ curSurvey.DSSV_Name }}</div>
    </div>
  </div>
</template>
<script>
import { getSurveyListByUser, getSurvey } from '@/api/flowCenter/field/surveySelection'
export default {
  props: ['value', 'disabled', 'props', 'required', 'isBusiness'],
  data: function () {
    return {
      data: {
        id: null,
        displayName: '',
      },
      curSurvey: null,
      surveys: [],
      loading: false,
      detailVis: true,
    }
  },
  computed: {
    myprops() {
      return this.props ? this.props : []
    },
    name() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'name')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '户主'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '户主'
        }
      }
      return '户主'
    },
    labelWidth() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'labelWidth')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '140px'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '140px'
        }
      }
      return '140px'
    },
    width() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'width')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '100%'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '100%'
        }
      }
      return '100%'
    },
  },
  methods: {
    toSurvey() {
      this.$router.push({
        path: 'userSurveyDetail',
        query: { id: curSurvey.DSSV_ID, prjId: curSurvey.DSSV_ProjectID },
      })
    },
    getSurveyListByUser(keyword) {
      this.loading = true
      getSurveyListByUser().then(({ data }) => {
        this.surveys = data
        this.loading = false
      })
    },
    chooseSurvey(val) {
      getSurvey(val).then(({ data }) => {
        this.curSurvey = data
        this.input()
      })
    },
    input() {
      this.data.id = this.curSurvey.DSSV_ID
      this.data.displayName =
        '【' + this.curSurvey.DSSV_Village + '】' + this.curSurvey.DSSV_Name
      this.$emit('input', JSON.stringify(this.data))
      this.$emit('display', this.data.displayName)
    },
  },
  mounted: function () {
    if (this.value && Object.keys(this.value).length) {
      this.data = JSON.parse(this.value)
      if (this.data.id) {
        getSurvey(this.data.id).then(({ data }) => {
          this.surveys = [data]
          this.curSurvey = data
        })
      }
    }
    else {
      this.getSurveyListByUser()
    }
  },
}
</script>
<style scoped>
.el-form-item {
  margin: 10px !important;
}
</style>